<template>
  <div class="module">
    <!--告警类型-->
    <MTitle ref="title" icon="gjlx" @search="initData"></MTitle>
    <MBox>
      <MTabs class="m-tabs" :list="list" :activeIndex="activeIndex" @change="tabChange"></MTabs>
      <div class="content-box">
        <div class="bg">
          <div class="animate" :class="{'show':isShow}">
            <template v-for="(item, index) in allData">
              <div class="ball" :class="'ball' + (2*index + 1)" :key="'a'+index">
                <div class="box">
                  <span class="count">{{ item.count }}</span>
                  <img class="img" :src="require(`./images/${index+1>6?6:index+1}.png`)" alt="">
                  <div class="name">
                    <ScrollListX :data="item.name"><span style="padding: 0 5px">{{ item.name }}</span></ScrollListX>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </MBox>
  </div>
</template>
<script>
import MTitle from '../base-com/m-title/m-title'
import MBox from '../base-com/m-box/m-box'
import MTabs from '../base-com/m-tabs/m-tabs'
import ScrollListX from '../base-com/scroll-list/scroll-list-x'

import { warningStatistics } from '@/api/warnings'
import { shipMixin } from '../../mixins/mixin'

export default {
  mixins: [shipMixin],
  components: {
    MTitle,
    MBox,
    MTabs,
    ScrollListX
  },
  data() {
    return {
      activeIndex: 0,
      list: [
        {
          name: '告警类型',
          value: 'type',
        },
      ],
      allData: [],
      isShow: false
    }
  },
  methods: {
    shipChange() {
      this.initData();
    },
    initData() {
      const searchData = this.$refs.title.getForm()
      searchData.shipId = this.shipId
      warningStatistics(searchData).then(res => {
        let result = res?.result?.type || []

        result.sort((value1, value2) => {
          let a = value1.count
          let b = value2.count
          return a < b ? 1 : a > b ? -1 : 0
        })
        result = result.slice(0, 6)
        this.allData = result
        this.$nextTick(() => {
          setTimeout(() => {
            this.isShow = true
          }, 20)
        })
      })

    },
    tabChange(index) {
    },
    init() {

    }
  }
}
</script>


<style lang="scss" scoped>
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .bg {
    width: 350px;
    height: 88px;
    background: url("./images/bg.png") no-repeat center;
    background-size: 350px 100%;
  }
}
.animate {
  position: relative;
  //border: 1px solid red;
  margin: 0 auto;
  width: 300px;
  height: 100px;
  top: -20px;
  opacity: 0;
  &.show {
    opacity: 1;
  }
  //&:before {
  //  content: '';
  //  display: block;
  //  width: 1px;
  //  height: 150%;
  //  position: absolute;
  //  top: 50%;
  //  left: 50%;
  //  transform: translate(-50%, -50%);
  //  background: red;
  //}
  //&:after {
  //  content: '';
  //  display: block;
  //  width: 150%;
  //  height: 1px;
  //  position: absolute;
  //  top: 50%;
  //  left: 50%;
  //  transform: translate(-50%, -50%);
  //  background: red;
  //}
  .ball {
    width: 0px;
    height: 0px;
    position: absolute;
    font-size: 12px;
    display: none;
  }
  &:hover {
    .ball {
      animation-play-state: paused;
    }
  }
}
::v-deep .list-body {
  font-size: 16px !important;
}
$time: 6;
.ball1 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2+s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  display: block !important;
}
.ball2 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-1s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate;
  display: block !important;
}
.ball3 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-2s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
  display: block !important;
}
.ball4 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-3s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
  display: block !important;
}
.ball5 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-4s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
  display: block !important;
}
.ball6 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-5s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate;
  display: block !important;
}
.ball7 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-6s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
  display: block !important;
}
.ball8 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-7s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -7s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -7s infinite alternate;
  display: block !important;
}
.ball9 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-8s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
  display: block !important;
}
.ball10 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-9s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
  display: block !important;
}
.ball11 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-10s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
  display: block !important;
}
.ball12 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-11s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -11s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -11s infinite alternate;
  display: block !important;
}
.ball13 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-12s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
  display: block !important;
}
.ball14 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-13s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -13s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -13s infinite alternate;
  display: block !important;
}
.ball15 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-14s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate;
  display: block !important;
}
.ball16 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-15s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
  display: block !important;
}
.ball17 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-16s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate;
  display: block !important;
}
.ball18 {
  animation: animX $time+s cubic-bezier(0.36, 0, 0.64, 1) 0-$time/2-17s infinite alternate,
  animY $time+s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
  scale $time*2+s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate;
  display: block !important;
}
@keyframes animX {
  0% {
    left: 0px;
  }
  100% {
    left: 300px;
  }
}
@keyframes animY {
  0% {
    top: 0px;
  }
  100% {
    top: 100px;
  }
}
@keyframes scale {
  0% {
    transform: scale(0.5)
  }
  50% {
    transform: scale(1)
  }
  100% {
    transform: scale(0.5)
  }
}
.ball .box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  text-align: center;
  > img {
    display: block;
    width: 64px;
    height: 76px;
    //position: absolute;
    //top: 0;
    //left: 0;
  }
  .count {
    color: #FFC425;
    font-weight: 600;
    display: block;
    text-align: center;
    width: 64px;
    font-size: 30px;
  }
  .name {
    color: #fff;
    font-size: 16px;
    display: block;
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 100px;
    height: 16px;
    transform: translate(-50%, 0);
    word-break: keep-all;
    text-align: center;
  }
}
</style>
